<template>
    <div>
        <h1>害虫一览</h1>
        <table border="1" style="width :1000px ; text-align:center">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>寄主</th>
                    <th>主要危害</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(insect,index) in insectList" :key="insect.insectId">
                    <td>{{insect.insectName}}</td>
                    <td>{{insect.insectHost}}</td>
                    <td>{{insect.insectHarm}}</td>
                </tr>
            </tbody>
        </table>
        <div style="text-align:center">
            <input type="button" value="<" @click="reduce()">
            <input type="button" value=">" @click="increase()">
        </div>
        <div><input type="button" value="查看" @click="se()"></div>

        <div v-if="box">
            请输入查询id：<input type="text" id="id">
            {{insectId}}
            <input type="button" value="查看详情" @click="selectAll()">
        </div>

        <div>
            <fieldset>
                <legend>查询日志信息</legend>
                害虫名：<input type="text" name="insectName" id="insectName"><br>
                寄主：<input type="text" name="insectHost" id="insectHost"><br>
                <input type="button" value="查找" @click="select()">
            </fieldset>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            insectId: 0,
            insectList: [],
            insectName: "",
            insectHost: "",
            insectHarm: "",
            pageNO: 1,
            box: false
        }
    },
    methods: {
        async selectAllInsect(pageNO) {
            let paramObj = { pageNO: this.pageNO }
            let cutObj = await this.ajax.getSubmit("/api/insects/selectAllInsect", paramObj)
            this.insectList = cutObj.list;
            this.insectName = cutObj.insectName;
            this.insectHost = cutObj.insectHost;
            this.insectHarm = cutObj.insectHarm;
        },
        increase() {
            this.pageNO++
            this.selectAllInsect(this.pageNO)
        },
        reduce() {
            this.pageNO--
            this.selectAllInsect(this.pageNO)
        },

        async select() {
            var insectName = document.getElementById("insectName").value;
            this.insectName = insectName

            var insectHost = document.getElementById("insectHost").value;
            this.insectHost = insectHost

            let paramObj = { pageNO: this.pageNO, name: this.insectName, host: this.insectHost }
            let cutObj = await this.ajax.getSubmit("/api/insects/selectInsectByName", paramObj)

            this.insectList = cutObj.list;
            this.insectName = cutObj.insectName;
            this.insectHost = cutObj.insectHost;
            this.insectHarm = cutObj.insectHarm;
        },
        se() {
           this.box=true;
        },
        
    
        selectAll(insectId) {
            this.insectId=document.getElementById("id").value;
            window.open("/InsectInfo?"+this.insectId)
        },

    },
    created() {// 页面被创建时调用的函数 和data，computed，methods同级
        this.selectAllInsect(1)
    }
}
</script>

<style>

</style>
